import React, {Component, Fragment} from 'react';
import styles from './index.module.scss';
import {Grid, Dialog, Overlay} from '@alifd/next';
import Login from './../Login';
import {Modal, message} from 'antd';
import SimpleVideoPlayer from './../SimpleVideoPlayer';
import {Pagination} from 'antd'
import QueueAnim from 'rc-queue-anim';
import PDF from 'react-pdf-js';
import StudyList from './../StudyList';
import 'antd/dist/antd.css';

const {Row, Col} = Grid;

export default class Index extends Component {
    static displayName = 'Index';

    static propTypes = {};

    static defaultProps = {};

    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            modal2Visible: false,
            modalLoginVisible: false,
            modalBooksVisible: false,
            modalStudyVisible: false,
            currentPage: 1,
            pages: 1,

        }
    }

    setModalLoginVisible(bool) {
        this.setState({modalLoginVisible: bool});
    }

    setModalBooksVisible(bool) {
        this.setState({modalBooksVisible: bool});
        if(bool === true) {
            message.loading("正在加载申报书，请稍后", 5)
        }
    }

    setModal2Visible(bool) {
        this.setState({modal2Visible: bool});
    }
    setModalStudyVisible(bool) {
        this.setState({modalStudyVisible: bool});
    }

    onDocumentComplete = (tmp) => {
        console.log(tmp);
        this.setState({
            page: 1,
            pages: tmp
        });
    };

    onChange(page) {
        this.setState({
            page: page,
        });
    }

    render() {
        return (
            <Fragment>
                <QueueAnim delay={400} type={"scaleBig"}>
                <div className={styles.container} key='menuItems'>

                    <Row gutter='40' align='stretch' className={styles.row}>
                        <Col span={6}>
                                <div className={styles.col_1} onClick={() => this.setModalBooksVisible(true)}>
                                    <div className={styles.col_1_img}/>
                                    <p className={styles.col_1_text}>申报书</p>
                                </div>
                                <Modal
                                    title="申报书查看"
                                    centered
                                    visible={this.state.modalBooksVisible}
                                    onOk={() => this.setModalBooksVisible(false)}
                                    onCancel={() => this.setModalBooksVisible(false)}
                                    width={620}
                                    footer={null}
                                    destroyOnClose={true}
                                >
                                    <PDF
                                        file='./purpose.pdf'
                                        onDocumentComplete={this.onDocumentComplete.bind(this)}
                                        page={this.state.page}
                                    />
                                    <div className={styles.pagination}>
                                        <Pagination simple onChange={this.onChange.bind(this)}
                                                    total={this.state.pages * 10} current={this.state.page}/>
                                    </div>
                                </Modal>
                        </Col>
                        <Col span={6}>
                                <div className={styles.col_2} onClick={() => this.setModal2Visible(true)}>
                                    <div className={styles.col_2_img}/>
                                    <p className={styles.col_1_text}>申报视频</p>
                                </div>
                                <Modal
                                    title="申报视频"
                                    centered
                                    visible={this.state.modal2Visible}
                                    onOk={() => this.setModal2Visible(false)}
                                    onCancel={() => this.setModal2Visible(false)}
                                    width={1200}
                                    cancelButtonProps={{disabled: true}}
                                    footer={null}
                                    destroyOnClose={true}
                                >
                                    <SimpleVideoPlayer/>
                                </Modal>
                        </Col>
                        <Col span={6}>
                                <div className={styles.col_3} onClick={() => this.setModalLoginVisible(true)}
                                     id="safeNodes">
                                    <div className={styles.col_3_img}/>
                                    <p className={styles.col_1_text}>开始实验</p>
                                </div>
                                {/*<Overlay visible={this.state.visible}*/}
                                {/*         safeNode="safeNodes"*/}
                                {/*         align="cc cc"*/}
                                {/*         hasMask*/}
                                {/*         disableScroll*/}
                                {/*         canCloseByOutSideClick*/}
                                {/*         onRequestClose={this.onClose}>*/}
                                {/*    <span className={styles.overlayDemo}>*/}
                                {/*        <Login/>*/}
                                {/*    </span>*/}
                                {/*</Overlay>*/}
                                <Modal
                                    title="用户登录"
                                    centered
                                    visible={this.state.modalLoginVisible}
                                    onOk={() => this.setModalLoginVisible(false)}
                                    onCancel={() => this.setModalLoginVisible(false)}
                                    width={700}
                                    footer={null}
                                >
                                    <Login/>
                                </Modal>
                        </Col>


                        <Col span={6}>
                                <div className={styles.col_4} onClick={() => this.setModalStudyVisible(true)}>
                                    <div className={styles.col_4_img}/>
                                    <p className={styles.col_1_text}>学习资源
                                    </p>
                                </div>
                                <Modal
                                    title="学习资源"
                                    centered
                                    visible={this.state.modalStudyVisible}
                                    onOk={() => this.setModalStudyVisible(false)}
                                    onCancel={() => this.setModalStudyVisible(false)}
                                    width={1100}
                                    footer={null}
                                >
                                    <StudyList/>
                                </Modal>
                        </Col>

                    </Row>

                </div>
            </QueueAnim>
            </Fragment>
        );
    }
}
